<template>
  <div class="container deal-order btm-pop deal-index">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="市场" />
    <!-- <image src="../../assets/deal/deal-index-top.png" class="deal-top-img" mode=""></image>
    <image src="../../assets/deal/deal-index-title.png" class="deal-title" mode=""></image> -->
    <div class="deal-chart-div div-sizing">
      <view class="u-flex u-ju-between u-ali-center">
        <div class="flex-between-center chart-top-left">
          <span class="custom-title">行情走势</span>
        </div>
        <view :class="is_chart ? '' : 'van-cell-radius'" @click="isChart">
          <span class="custom-title2">{{is_chart ? '收起' : '展开'}}</span>
        </view>
      </view>
      <div v-if="is_chart" class="echars-top-line" />

      <div class="echars-div" :class="is_chart ? 'show' : 'hidden'">
        <qiun-data-charts type="line" :opts="opts" :chartData="chartData" v-if="is_ucharts" />
      </div>
    </div>
    <div class="flex-between-center deal-top-menu div-sizing" :class="tabClass">
      <div class="flex-between-center menu-item" v-for="(item,index) in menu" :key="index" @click="hitMenu(item)">
        <image :src="item.icon" mode="widthFix" class="menu-icon"></image>
        <span>{{item.name}}</span>
      </div>
    </div>
    <view>
      <view class="u-flex u-ju-center">
        <u-tabs :list="tabNav" @click="navClick"></u-tabs>
      </view>
      <div class="order-item" v-for="(item,index) in list" :key="index">
        <div class="flex-between-center item-top">
          <div class="item-top-left">
            <div class="item-top-name">
              <span class="">{{item.user}}</span>
              <image :src="item.level_logo" class="item-level"></image>
            </div>
            <div class="item-number font-family-din">数量：{{item.num}}<span
                class="item-unit">{{type | fixMoneyType}}</span></div>
          </div>
          <div class="flex-between-center item-top-right">
            <div class="right-tag">单价:</div>
            <div class="right-price font-family-din">￥{{item.price}}</div>
          </div>
        </div>
        <div class="flex-between-center item-btm">
          <div class="btm-left">
            <image class="pay-img" v-for="(item,index) in item.paymant" :key="index"
              :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : item == 4 ? usdtImg : ''"
              mode=""></image>
          </div>
          <div>
            <u-button class="input-right-btn" @click="showDeal(item)" type="primary" size="mini">{{tabIndex | fixType}}
            </u-button>
          </div>
        </div>
      </div>
    </view>
    <u-popup :show="show" mode="bottom" @close="close" :round="20" :closeable="true">
      <div class="pop-div div-sizing">
        <div class="pop-title">{{tabIndex | fixType}}{{type | fixMoneyType}}</div>
        <div class="buy-price">{{acItem.total_price || 0}}</div>
        <div class="buy-title">交易总额（CNY）</div>
        <div class="flex-between-center buy-info">
          <div>单价 <span class="buy-left">{{acItem.price || 0}}CNY</span></div>
          <div>交易数量：{{acItem.num || 0}} <span class="buy-left">{{type | fixMoneyType}}</span></div>
        </div>
        <div class="input-line">
          <div class="flex-between-center input-title">
            <div>按{{payType == 1 ? '数量' : '价格'}}{{tabIndex | fixType}}</div>
          </div>
          <div class="u-flex">
            <u--input v-model="number" type="number" :placeholder="'请输入'+(tabIndex == 0 ? '购买' : '出售')+'数量'"
              v-if="payType == 1">
            </u--input>
            <u-button style="width: 100rpx;" type="primary" size="small" class="input-right-btn" @click="changeAll" t>全部
            </u-button>
          </div>

          <div class="input-title input-title-btm" v-if="payType == 1">总价：<span>{{fixCount}}(CNY)</span></div>
          <div class="input-title input-title-btm" v-else>可获得：{{fixCount}}({{type | fixMoneyType}})</div>
        </div>
        <div class="input-line">
          <div class="input-title">安全密码</div>
          <u-input v-model="password" type="password" maxlength="6" clearable placeholder="请输入安全密码" />
        </div>
        <div class="vant-btn" style="margin-top: 20rpx;">
          <u-button type="info" @click="submitDeal" shape="circle">确认</u-button>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
  import {
    coinList,
    coinBuyOrder,
    coinSellOrder,
    getKLine
  } from '@/api/deal/index.js'
  import md5 from '../../utils/md5.js'
  export default {
    filters: {
      fixType(val) {
        return val == 0 ? '购买' : '出售'
      },
      fixMoneyType(val) {
        return val == 2 ? 'YKB' : 'USDT'
      }
    },
    data() {
      return {
        is_ucharts: false,
        chartData: {
          categories: [],
          series: [{
            name: "当前价格",
            data: []
          }]
        },
        //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        opts: {
          color: ['#0072DC', '#828282'],
          padding: [15, 10, 0, 15],
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            data: [{
              title: '价格（元）',
            }],
            showTitle: true,
            type: 'value',
            gridType: "dash",
            dashLength: 2
          },
          extra: {
            line: {
              type: "straight",
              width: 2
            }
          }
        },
        tabNav: [{
          id: 0,
          name: '购买YKB'
        }, {
          id: 1,
          name: '出售YKB'
        }],
        alipayImg: require('@/assets/deal/alipay.png'),
        wechatImg: require('@/assets/deal/wechat.png'),
        bankImg: require('@/assets/deal/bank.png'),
        usdtImg: require('@/assets/deal/usdt.png'),
        menu: [{
            icon: require('@/assets/deal/wdjy.png'),
            name: '我的交易',
            route: '/pages/deal/my_deal'
          },
          {
            icon: require('@/assets/deal/wdfb.png'),
            name: '我的发布',
            route: '/pages/deal/my_issue'
          }, {
            icon: require('@/assets/deal/fbjy.png'),
            name: '发布交易',
            route: '/pages/deal/deal_issue'
          }, {
            icon: require('@/assets/deal/skfs.png'),
            name: '收款方式',
            route: '/pages/mine/pay_term/index'
          },
          // {
          //   icon: require('@/assets/deal/sq.png'),
          //   name: '收起',
          //   route: 'null'
          // },
        ],
        active: 0,
        tabIndex: 0,
        type: 2,
        payType: 1, //购买类型
        tabList: ['购买', '出售'],
        show: false,
        number: '',
        password: '',
        answer: '',
        page: 1,
        list: [],
        loading: false,
        finished: false,
        tabClass: '',
        fixCount: 0, //计算可获得
        acItem: {}, //选中订单
        headerClass: '',
        is_chart: true, // 是否显示echart
        myChart: null,
        option: [],
        statusBarHeight: 0
      }
    },
    watch: {
      tabIndex(val) {
        this.onRefresh()
      },
      number(val) {
        if (val == '') {
          this.fixCount = 0
        } else {
          if (this.payType == 1) {
            if (val > this.acItem.num) {
              this.number = this.acItem.num
            } else {
              this.fixCount = ((val * (this.acItem.price * 100)) / 100).toFixed(2)
            }
          } else {
            if (val > this.acItem.price) {
              this.number = this.acItem.price
            } else {
              const index = val.indexOf('.')
              if (index !== -1) {
                if (val.substring(index + 1).length > 2) {
                  val = val.substring(0, val.length - 1)
                  this.number = parseFloat(val).toFixed(2)
                }
              }
              this.fixCount = ((val * 100) / (this.acItem.price * 100)).toFixed(2)
            }
          }
        }
      }
    },
    onShow() {
      setTimeout(() => {
        this.is_ucharts = true;
      }, 500)
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
    },
    mounted() {
      // this.myChart = this.$echarts.init(document.getElementById('echars'))
      this.getK()
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      getK() {
        getKLine().then(res => {
          if (res.code === 1) {
            const yMax = Math.max(...res.data.value)
            this.chartData.categories = res.data.time
            this.chartData.series[0].data = res.data.value
            // this.drawLine(res.data.time, res.data.value, yMax)
          }
        })
      },
      // 显示隐藏chart
      isChart() {
        this.is_chart = !this.is_chart
      },
      navClick(item) {
        this.tabIndex = item.id
      },
      getInfo() {
        let vm = this
        let type = 1
        // type == 2 是购买列表。1 是出售
        if (vm.tabIndex == 0) {
          type = 2
        }
        coinList({
          page: vm.page,
          type: type
        }).then(res => {
          if (res.code == 1) {
            vm.getInfoBack(res)
          }
        })
      },
      getInfoBack(res) {
        let vm = this
        let list = res.data.list
        vm.list = [...vm.list, ...list]
        if (vm.page < res.data.pages) {
          vm.page++;
        }
      },
      onRefresh() {
        this.page = 1
        this.list = []
        this.getInfo()
      },
      hitMenu(item) {
        if (item.route == 'null') {
          this.active = 1
          this.tabClass = 'menu-none'
        } else {
          this.$ui.push(item.route)
        }
      },
      showDeal(item) {
        let vm = this
        vm.show = true
        vm.acItem = item
      },
      // 选择购买方式
      changePayType() {
        if (this.payType == 1) {
          this.payType = 2
        } else {
          this.payType = 1
        }
        this.number = ''
      },
      changeHead(index) {
        if (index != this.type) {
          this.type = index
          if (index == 1) {
            this.headerClass = 'type-active-2'
          } else {
            this.headerClass = 'type-active-1'
          }
          this.onRefresh()
        }
      },
      submitDeal() {
        let vm = this
        if (vm.number == '') {
          vm.$ui.toast('请输入' + vm.payType == 1 ? '数量' : '价格')
        } else if (vm.password == '') {
          vm.$ui.toast('请输入安全密码')
        } else {
          let num = 0
          let price = 0
          if (vm.payType == 1) {
            num = vm.number
          } else {
            price = vm.number
          }
          if (vm.tabIndex == 0) {
            coinBuyOrder({
              id: vm.acItem.id,
              num: num,
              price: price,
              password: md5.hex_md5(vm.password)
            }).then(res => {
              if (res.code == 1) {
                vm.$ui.toast(res.msg)
                vm.putBack(res)
              } else {
                vm.$ui.toast(res.msg)
              }
            })
          } else {
            coinSellOrder({
              id: vm.acItem.id,
              num: num,
              price: price,
              password: md5.hex_md5(vm.password)
            }).then(res => {
              if (res.code == 1) {
                vm.$ui.toast(res.msg)
                vm.putBack(res)
              } else {
                vm.$ui.toast(res.msg)
              }
            })
          }
        }
      },
      putBack(res) {
        let vm = this
        vm.$ui.toast(res.msg)
        vm.show = false
        vm.resetData()
        vm.onRefresh()
      },
      close() {
        this.show = false
      },
      resetData() {
        this.number = ''
        this.password = ''
        this.acItem = {}
      },
      // 返回一个特定的 DOM 节点，作为挂载的父节点
      getContainer() {
        return document.querySelector('.deal-index');
      },
      // 全选
      changeAll() {
        if (this.payType == 1) {
          this.number = this.acItem.num
        } else {
          this.number = this.acItem.total_price
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .deal-index {
    top: 0;
    min-height: 100vh;
    background: #f2f2f2;
    padding-bottom: 1.8rem;
    padding-bottom: calc(1.8rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1.8rem + env(safe-area-inset-bottom));

    .deal-top-img {
      width: 100%;
      height: 458rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .deal-title {
      width: auto;
      height: 44rpx;
      position: absolute;
      top: 100rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    .deal-chart-div {
      margin-top: 30rpx;
      padding: 0 52rpx;

      .van-cell {
        padding: 0 0 20rpx;
        font-size: 24rpx;
        color: #ffffff;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
      }

      .van-cell-radius {
        border-radius: 10rpx;
      }

      .custom-title2 {
        font-size: 24rpx;
        position: relative;
      }

      .custom-title {
        font-size: 24rpx;
        position: relative;

        &::after {
          content: '';
          width: 4rpx;
          height: 28rpx;
          background: #2E85DC;
          position: absolute;
          left: -20rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .chart-top-left {
        height: 40rpx;
        width: 150rpx;
        font-size: 32rpx;
        color: #707070;
        justify-content: center;
        border-radius: 20rpx;
      }

      .echars-div {
        width: 100%;
        height: 560rpx;
        background: #F8F8F8;
      }

      @-webkit-keyframes slide-down {
        0% {
          transform: scale(1, 0);
        }

        100% {
          transform: scale(1, 1);
        }
      }

      @keyframes slide-down {
        0% {
          -webkit-transform: scale(1, 0);
        }

        100% {
          -webkit-transform: scale(1, 1);
        }
      }

      .show {
        max-height: 660rpx;
        transition: max-height 0.3s ease-in;
        transform-origin: 50% 0;
        animation: slide-down 0.3s ease-in;
        -webkit-animation: slide-down 0.3s ease-in;
      }

      .hidden {
        max-height: 0rpx;
        overflow: auto;
        transition: max-height 0.3s ease-out;
      }
    }

    .deal-top-menu {
      width: 100%;
      height: 148rpx;
      padding: 0 40rpx;
      margin-top: 24rpx;
      justify-content: flex-start;
      background: #ffffff;

      .menu-item {
        flex: 1;
        flex-direction: column;

        .menu-icon {
          width: 52rpx;
          height: 52rpx;
          margin-bottom: 18rpx;
        }

        span {
          font-size: 24rpx;
        }
      }
    }

    .menu-block {
      animation: packDown 0.5s forwards;
    }

    .menu-none {
      animation: packUp 0.5s forwards;
    }

    @keyframes packUp {
      0% {
        margin-top: 0;
      }

      100% {
        margin-top: -148rpx;
      }
    }

    @-webkit-keyframes packUp {
      0% {
        margin-top: 0;
      }

      100% {
        margin-top: -148rpx;
      }
    }

    @-o-keyframes packUp {
      0% {
        margin-top: 0;
      }

      100% {
        margin-top: -148rpx;
      }
    }

    @-moz-keyframes packUp {
      0% {
        margin-top: 0;
      }

      100% {
        margin-top: -148rpx;
      }
    }

    @keyframes packDown {
      0% {
        margin-top: -148rpx;
      }

      100% {
        margin-top: 0;
      }
    }

    @-webkit-keyframes packDown {
      0% {
        margin-top: -148rpx;
      }

      100% {
        margin-top: 0;
      }
    }

    @-o-keyframes packDown {
      0% {
        margin-top: -148rpx;
      }

      100% {
        margin-top: 0;
      }
    }

    @-moz-keyframes packDown {
      0% {
        margin-top: -148rpx;
      }

      100% {
        margin-top: 0;
      }
    }

    .van-list {
      padding-bottom: 40rpx;
    }

    .order-item {
      background: #ffffff;
      padding: 20rpx 30rpx;
      margin-top: 20rpx;

      .item-top {
        padding-bottom: 10rpx;
        border-bottom: 2rpx solid rgba(#707070, 0.2);

        .item-top-left {
          .item-top-name {
            margin-bottom: 16rpx;

            .item-level {
              width: auto;
              height: 34rpx;
              margin-left: 10rpx;
            }
          }

          .item-unit {
            margin-left: 10rpx;
          }
        }

        .item-top-right {
          text-align: right;
          align-items: flex-end;
          flex-direction: column;

          .right-tag {
            font-size: 24rpx;
            margin-bottom: 6rpx;
          }

          .right-price {
            font-size: 36rpx;
            color: #ff0000;
          }
        }
      }

      .item-btm {
        height: 50rpx;
        padding-top: 18rpx;

        .pay-img {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        .vant-btn {
          margin: 0;

          button {
            width: 178rpx;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 36rpx;
            border-radius: 10rpx;
          }
        }
      }
    }

    .pop-div {
      height: 1192rpx;
      padding: 0 20rpx;

      .buy-price {
        font-size: 52rpx;
        text-align: center;
        margin: 56rpx 0 10rpx;
      }

      .buy-title {
        font-size: 24rpx;
        text-align: center;
        margin-left: 20rpx;
        margin-bottom: 42rpx;
      }

      .buy-info {
        font-size: 26rpx;
        margin-bottom: 84rpx;

        .buy-left {
          margin-left: 10rpx;
        }
      }

      .input-title {
        .title-right {
          width: 200rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10rpx;
          box-shadow: 0 6rpx 12rpx 0 rgba(#000000, 0.16);
        }

        .change-icon {
          width: auto;
          height: 40rpx;
          margin-right: 12rpx;
        }
      }

      .input-title-btm {
        margin-top: 20rpx;

        span {
          font-size: 36rpx;
        }
      }
    }
  }
</style>

<style lang="less">
  .deal-index {
    .van-tabs__line {
      height: 4rpx;
      background: #12a3e4;
    }

    .van-tab__text {
      color: #ababab;
    }

    .van-tab--active {
      .van-tab__text {
        color: #12a3e4;
      }
    }

    .van-sticky,
    .van-tab,
    .van-tabs__wrap,
    .van-tabs__nav {
      background: none;
    }

    .van-tabs__wrap::after {
      display: none;
    }

    .van-sticky--fixed {
      top: 2rem;
      background: #f2f2f2;
    }
  }

  .pad_box {
    padding: 20rpx;
    box-sizing: border-box;
  }
</style>
